<!--
 * @Author: GongSaiPeng
 * @Date: 2024-03-16 19:29:48
 * @LastEditTime: 2024-04-19 11:40:03
 * @LastEditors: GongSaiPeng
 * @Description: 主程序入口
 * @FilePath: \gong-main-app\gong-main-app\src\views\MainView\index.vue
-->
<script setup lang="ts" name="MainView">
import { ref, reactive, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";

import { gsap } from "gsap";

// 获取当前路由
const route = useRoute();
// 获取路由实例
const router = useRouter();

let ringImgArr = reactive([
  {
    id: 1,
    name: "原神启动",
    imgUrl: "./public/img/1.jpg",
    href: "http://123.56.124.179/yuanshen",
    routerURL: "",
  },
  {
    id: 2,
    name: "粒子特效",
    imgUrl: "./public/img/2.jpg",
    href: "http://123.56.124.179/lizi",
    routerURL: "",
  },
  {
    id: 3,
    name: "密码生成器",
    imgUrl: "./public/img/3.jpg",
    href: "http://123.56.124.179/password",
    routerURL: "",
  },
  {
    id: 4,
    name: "雷姆板娘",
    imgUrl: "./public/img/4.jpg",
    href: "http://123.56.124.179/lamu",
    routerURL: "",
  },
  {
    id: 5,
    name: "聊天室",
    imgUrl: "./public/img/5.jpg",
    href: "http://123.56.124.179/chat-vue",
    routerURL: "",
  },
  {
    id: 6,
    name: "颜色渐变",
    imgUrl: "./public/img/6.jpg",
    href: "https://color.oulu.me/index.html",
    routerURL: "",
  },
  {
    id: 7,
    name: "mdEditor",
    imgUrl: "./public/img/7.jpg",
    href: "#",
    routerURL: "/mdEditor",
  },
  {
    id: 8,
    name: "暂无",
    imgUrl: "./public/img/8.jpg",
    href: "#",
    routerURL: "",
  },
  {
    id: 9,
    name: "暂无",
    imgUrl: "./public/img/9.jpg",
    href: "#",
    routerURL: "",
  },
  {
    id: 10,
    name: "暂无",
    imgUrl: "./public/img/10.jpg",
    href: "#",
    routerURL: "",
  },
]);
// 自定义泛型
interface clickBtnFunParams {
  id: number;
  name: string;
  imgUrl: string;
  href: string;
  routerURL: string;
}
/**
 * @description: 点击某个按钮
 * @param {*} params
 * @return {*}
 */
function clickBtnFun(params: clickBtnFunParams) {
  if (params.routerURL !== "") {
    // 路由跳转
    router.push(params.routerURL);
  } else {
    // 页面跳转
    window.location.href = params.href;
  }
}
onMounted(() => {
  let xPos = 0;
  gsap
    .timeline()
    .set(".ring", { rotationY: 180, cursor: "grab" }) //set initial rotationY so the parallax jump happens off screen
    .set(".img", {
      // apply transform rotations to each image
      rotateY: (i) => i * -36,
      transformOrigin: "50% 50% 500px",
      z: -500,
      backgroundImage: (i) => "url(./public/img/" + (i + 1) + ".jpg)",
      backgroundPosition: (i) => getBgPos(i),
      backfaceVisibility: "hidden",
    })
    .from(".img", {
      duration: 1.5,
      y: 200,
      opacity: 0,
      stagger: 0.1,
      ease: "expo",
    })
    .add(() => {
      $(".img").on("mouseenter", (e) => {
        let current = e.currentTarget;
        gsap.to(".img", {
          opacity: (i, t) => (t == current ? 1 : 0.5),
          ease: "power3",
        });
      });
      $(".img").on("mouseleave", (e) => {
        gsap.to(".img", { opacity: 1, ease: "power2.inOut" });
      });
    }, "-=0.5");

  // 当用户在元素上按下鼠标按钮时触发
  $(window).on("mousedown touchstart", dragStart);
  // 当用户在元素上释放鼠标按钮时触发
  $(window).on("mouseup touchend", dragEnd);

  function dragStart(e) {
    if (e.touches) e.clientX = e.touches[0].clientX;
    xPos = Math.round(e.clientX);
    gsap.set(".ring", { cursor: "grabbing" });
    $(window).on("mousemove touchmove", drag);
  }

  function drag(e) {
    if (e.touches) e.clientX = e.touches[0].clientX;

    gsap.to(".ring", {
      rotationY: "-=" + ((Math.round(e.clientX) - xPos) % 360),
      onUpdate: () => {
        gsap.set(".img", { backgroundPosition: (i) => getBgPos(i) });
      },
    });

    xPos = Math.round(e.clientX);
  }

  function dragEnd(e) {
    $(window).off("mousemove touchmove", drag);
    gsap.set(".ring", { cursor: "grab" });
  }

  function getBgPos(i) {
    //returns the background-position string to create parallax movement in each image
    return (
      100 -
      (gsap.utils.wrap(
        0,
        360,
        gsap.getProperty(".ring", "rotationY") - 180 - i * 36
      ) /
        360) *
        500 +
      "px 0px"
    );
  }
});
</script>

<template>
  <div class="stage">
    <div class="container">
      <div class="ring">
        <div class="img" v-for="(item, index) in ringImgArr" :key="index">
          <!-- 展示图片 -->
          <!-- <img :src="item.imgUrl" alt="展示图片" class="showImg"> -->
          <!-- 跳转按钮 -->
          <el-button type="danger" plain @click="clickBtnFun(item)">{{
            item.name
          }}</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
html,
body,
.stage,
.ring,
.img {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  user-select: none;
}

html,
body,
.stage {
  overflow: hidden;
  background: #000;
}

div,
svg {
  position: absolute;
}

.container {
  perspective: 2000px;
  width: 300px;
  height: 400px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  .img {
    display: flex;
    justify-content: center;
    align-items: end;

    // .showImg {
    //     width: 90%;
    //     height: 90%;
    //     pointer-events: none;
    // }
    .el-button {
      margin-bottom: 10px;
    }
  }
}
</style>
